<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h1>登录/注册</h1>
<!--表单：form标签
action：表单的提交位置
method：表单的提交方式，有get、post两种方式
-->
<form action="1.我的第一个网页.html" method="get">

    <!--文本框：input type="text"
        value：赋予初始值
        maxlength：最大可输入的字符数
        size：文本框的宽度
    -->
    <p>名字：<input type="text" name="username" value="user" maxlength="8" size="30"></p>
    <p>密码：<input type="password" name="pwd" maxlength="11"></p>


    <!--单选框：input type="radio"
        name:name一样表示一个组
        value:该单选框所代表的值，比如男提交后，sex=boy
        只有加了name="必须相同"，单选框才能生效：相同的name表示它们是一个组的，只能选其中一个
        checked：默认选中选项
    -->
    <p>性别：
        <input type="radio" name="sex" value="boy" checked>男
        <input type="radio" name="sex" value="girl">女
    </p>


    <!--多选框：input type="checkbox"
        name：name一样的才是一个组
        value：该多选框所代表的值
        checked：默认选中选项
    -->
    <p>多选框：
        <input type="checkbox" name="hobby" value="code">代码
        <input type="checkbox" name="hobby" value="study">学习
        <input type="checkbox" name="hobby" value="chat">聊天
    </p>


    <!--普通按钮：input type="button"
        value：按钮的名字
    -->
    <p>按钮：
        <input type="button" name="bt1" value="点击变长">
    </p>


    <!--图片按钮：input type="image"
        【注】：图片按钮点了会自动提交
    -->
    <p>图片按钮：
        <input type="image" src="../resource/image/img1.jpg" width="300px" height="300px">
    </p>


    <p>国家：
        <!--下拉框：select name="列表名称"
            option标签：可选选项
            value：该选项所代表的值
            selected：默认选项，写在哪个option就默认选中哪个option
        -->
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="American" selected>美国</option>
        </select>

    </p>


    <!--文本域：textarea
        cols：列数
        rows：行数
    -->
    <p>输入文本：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>


    <!--文件域：input type="file"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>

    <!--提交按钮和重置按钮-->
    <p>
        <input type="submit" name="Button" value="提交">
        <input type="reset" name="Reset" value="重置">
    </p>
</form>

</body>
</html>